<template>
  <view class="oneClick">
    <classifyHead title="一键预约" />
    <view class="content">
      <!-- 积分信息 -->
      <view class="middle" style="margin-top: 20rpx">
        <view class="middle-item">
          <view class="score-name"
            >今天可用竞购积分
            <image src="https://aocshop.oss-cn-hangzhou.aliyuncs.com/aoc/2025/9/2968da7edee4b0eb7e9b0feca7.png" mode="aspectFit" />
          </view>
          <view class="score-count">{{ availableScore }}</view>
        </view>
        <view style="font-size: 54rpx; margin-top: 10rpx">|</view>
        <view class="middle-item">
          <view class="score-name"
            >今天已预约的竞购限分
            <image src="https://aocshop.oss-cn-hangzhou.aliyuncs.com/aoc/2025/9/2968da7edee4b0eb7e9b0feca7.png" mode="aspectFit" />
          </view>
          <view class="score-count">{{ reservedScore }}</view>
        </view>
      </view>

      <!-- 助手服务说明 -->
      <view class="box">
        <view class="title"> 智能AI参拍预约助手服务 </view>
        <view class="box-item">
          <view class="title-left">
            <view>1.参拍区自动预约</view>
            <view>2.智能分析优化预约策略</view>
            <view>3.预约商品销售自动委托交易</view>
          </view>
          <image src="https://aocshop.oss-cn-hangzhou.aliyuncs.com/aoc/2025/9/2968da5818e4b0eb7e9b0fec8b.png" mode="scaleToFill" />
        </view>
      </view>

      <!-- 购买服务选项 -->
      <view class="shadowBox">
        <view class="name">服务购买</view>

        <!-- 选项 1 -->
        <view class="purchaseServices" @click="selectItem(0)">
          <checkBox v-model="selected[0]" :activeColor="'#5756b3'" />
          <view class="purchaseScore">
            <view style="margin-bottom: 20rpx">竞购积分:100</view>
            <view>活动积分:100</view>
          </view>
          <view class="servicesTime">
            <view class="time">30</view>
            <view>服务天数</view>
          </view>
        </view>

        <!-- 选项 2 -->
        <view class="purchaseServices" @click="selectItem(1)">
          <checkBox v-model="selected[1]" :activeColor="'#5756b3'" />
          <view class="purchaseScore">
            <view style="margin-bottom: 20rpx">竞购积分:300</view>
            <view>活动积分:300</view>
          </view>
          <view class="servicesTime">
            <view class="time">90</view>
            <view>服务天数</view>
          </view>
        </view>

        <!-- 选项 3 -->
        <view class="purchaseServices" @click="selectItem(2)">
          <checkBox v-model="selected[2]" :activeColor="'#5756b3'" />
          <view class="purchaseScore">
            <view style="margin-bottom: 20rpx">竞购积分:600</view>
            <view>活动积分:600</view>
          </view>
          <view class="servicesTime">
            <view class="time">180</view>
            <view>服务天数</view>
          </view>
        </view>

        <!-- 确认购买按钮 -->
        <button class="btn" @click="handlePurchase" :disabled="!hasSelected">
          确认购买
        </button>
      </view>
    </view>

    <!-- 支付弹窗 -->
    <payment v-model="showModal" />
  </view>
</template>

<script setup>
import classifyHead from "@/components/classifyHead.vue";
import checkBox from "@/components/checkbox.vue";
import payment from "@/components/payment.vue";
import { ref, computed, onMounted } from "vue";

// 控制支付弹窗显示
const showModal = ref(false);

// 每个选项的选中状态 [false, false, false]
const selected = ref([false, false, false]);

// 上方显示的积分（动态）
const availableScore = ref('0.00'); // 可用竞购积分
const reservedScore = ref('0.00');   // 已预约的竞购限分（即活动积分）

// 套餐数据
const packages = [
  { bidScore: 100, activityScore: 100 },
  { bidScore: 300, activityScore: 300 },
  { bidScore: 600, activityScore: 600 }
];

// 计算是否至少有一个被选中
const hasSelected = computed(() => selected.value.includes(true));

// 页面加载时从存储中恢复当前累计积分
onMounted(() => {
  //累计购买积分
  const totalBidRaw = Local.get('totalBidScore');
  const totalActRaw = Local.get('totalActivityScore');
 const totalBid = totalBidRaw == null || totalBidRaw === '' || isNaN(parseFloat(totalBidRaw))
    ? '0.00'
    : parseFloat(totalBidRaw).toFixed(2);

  const totalAct = totalActRaw == null || totalActRaw === '' || isNaN(parseFloat(totalActRaw))
    ? '0.00'
    : parseFloat(totalActRaw).toFixed(2);
     // 读取已使用积分（在“一键预约”等页面设置）
  const usedBidRaw = Local.get('usedBidScore');
  
  const usedBid = isNaN(parseFloat(usedBidRaw)) ? 0 : parseFloat(usedBidRaw);
  
  // 计算剩余可用积分
  const remainingBid = Math.max(0, totalBid - usedBid);

  // 更新页面显示
  availableScore.value = remainingBid.toFixed(2);
  reservedScore.value = totalAct;
});

// 选择某一项（单选）
const selectItem = (index) => {
  // 清空所有选择
  selected.value = [false, false, false];
  selected.value[index] = true;

  // 显示当前选中项的积分（仅预览，不累加）
  const pkg = packages[index];
  availableScore.value = pkg.bidScore.toFixed(2);
  reservedScore.value = pkg.activityScore.toFixed(2);
};

// 确认购买：执行累加逻辑
const handlePurchase = () => {
  if (!hasSelected.value) {
    uni.showToast({
      title: '请先选择一项服务',
      icon: 'none',
      duration: 2000
    });
    return;
  }

  const selectedIndex = selected.value.indexOf(true);
  const pkg = packages[selectedIndex];

  // 读取当前累计积分（默认为 0.00）
  const currentBidTotal = parseFloat(Local.get('totalBidScore', '0.00')) || 0;
  const currentActTotal = parseFloat(Local.get('totalActivityScore', '0.00')) || 0;

  // 计算新总和
  const newBidTotal = (currentBidTotal + pkg.bidScore).toFixed(2);
  const newActTotal = (currentActTotal + pkg.activityScore).toFixed(2);

  // 更新本地存储
  Local.set('totalBidScore', newBidTotal);
  Local.set('totalActivityScore', newActTotal);

  // 更新页面显示为最新累计值
  availableScore.value = newBidTotal;
  reservedScore.value = newActTotal;

  console.log(`累计积分更新：竞购=${newBidTotal}, 活动=${newActTotal}`);
  
  // 弹出支付
  showModal.value = true;
};
</script>

<style lang="scss">
.oneClick {
  .content {
    width: calc(100% - 20rpx);
    padding: 0 10rpx;

    .middle {
      background: #5756b3;
      height: 106rpx;
      width: 690rpx;
      border-radius: 30rpx;
      display: flex;
      justify-content: space-evenly;
      padding: 10rpx 20rpx;
      .middle-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: aliceblue;
        .score-name {
          display: flex;
          align-items: center;
          font-size: 25rpx;
          image {
            width: 30rpx;
            height: 30rpx;
            border-radius: 50%;
            margin-left: 12rpx;
          }
        }
        .score-count {
          font-size: 40rpx;
          margin-top: 12rpx;
        }
      }
    }

    .box {
      margin-top: 20rpx;
      width: 100%;
      padding-top: 20rpx;
      height: 260rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
      border-radius: 30rpx;
      .title {
        text-align: center;
      }
      .box-item {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .title-left {
          padding-top: 10rpx;
        }
        image {
          width: 70rpx;
          height: 70rpx;
        }
      }
    }

    .shadowBox {
      margin-top: 20rpx;
      width: calc(100% - 40rpx);
      padding: 0 20rpx;
      height: 900rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
      border-radius: 30rpx;
      .name {
        font-size: 40rpx;
        width: 100%;
        text-align: center;
        padding-top: 20rpx;
      }
      .purchaseServices {
        margin-top: 20rpx;
        border-radius: 30rpx;
        width: 100%;
        height: 200rpx;
        border: 1px solid #c7c3c3;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .time {
          font-size: 60rpx;
          color: #5756b3;
          width: 147rpx;
          text-align: center;
        }
      }
      .btn {
        background: #5756b3;
        margin-top: 40rpx;
        width: 520rpx;
        height: 100rpx;
        border-radius: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: aliceblue;
        &:disabled {
          opacity: 0.6;
          color: #ccc;
        }
      }
    }
  }
}
</style>